<template>
	<view>
		<view class="shopping-header">
			<view class="layout">
				<view class="shopping-header-tooltip">购物车<text>({{productTotal}})</text></view>
				<view class="shopping-header-address" @click="handleAddressSelected()">
					<view class="layout">
						<view class="shopping-header-address-icon">
							<image src="/static/icon/icon-location.png"></image>
						</view>
						<view class="shopping-header-address-text">同景国际城S组团3栋5楼1号</view>
						<view class="shopping-header-address-button">
							<image src="/static/icon/icon-next.png"></image>
						</view>
					</view>
				</view>
				<view class="shopping-header-button" @click="handleManageToggled()">{{allowedManageTooltip}}</view>
			</view>
		</view>
		<view class="shopping-box">
			<view v-if="productList.length < 1">
				没有数据
			</view>
			<view v-else class="shopping-box-item" v-for="(product,index) in productList" :key="index">
				<view class="layout">
					<view class="shopping-box-item-checked">
						<checkbox-group @change="handleShoppingChecked">
							<checkbox :value="product.ID"></checkbox>
						</checkbox-group>
					</view>
					<view class="shopping-box-item-icon">
						<image :src="product.productLogo"></image>
					</view>
					<view class="shopping-box-item-text">
						<view class="shopping-box-item-text-top">
							{{product.productName}}
						</view>
						<view class="shopping-box-item-text-info">
							{{product.productText}}
						</view>
						<view class="layout">
							<view class="shopping-box-item-text-price">
								<view class="shopping-box-item-text-price-newest">
									￥<text>{{product.productPrice}}</text>到手价
								</view>
								<view class="shopping-box-item-text-price-original">
									￥{{product.originalPrice}}
								</view>
							</view>
							<view class="shopping-box-item-text-volume">
								<view class="layout">
									<view @click="handleQuantityDecred(product,index)" class="shopping-box-item-text-volume-derice">
										-
									</view>
									<view class="shopping-box-item-text-volume-note">
										{{product.quantity}}
									</view>
									<view @click="handleQuantityAdded(product,index)" class="shopping-box-item-text-volume-added">
										+
									</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
		<view class="shopping-button">
			<view class="layout">				
				<view class="shopping-button-checkall">
					<checkbox>全选</checkbox>
					
				</view>
				<view class="shopping-button-action" v-if="allowedManage == 2">
					<view class="layout">
						<view class="shopping-button-action-clean">
							<view class="layout">
								<view class="shopping-button-action-clean-icon">
									<image src="/static/icon/icon-recovery.png"></image>
								</view>
								<view>快速清理</view>
							</view>
						</view>
						<view class="shopping-button-action-collection">移入收藏</view>
						<view class="shopping-button-action-delete" @click="handleShoppingRemoved()">删除</view>
					</view>
				</view>
				<view v-if="allowedManage == 1" class="shopping-button-discount">
					<view class="shopping-button-discount-text">
						合计：
						<text class="t">￥</text>
						<text>{{orderForm.orderAmount}}</text>
					</view>
					<view class="shopping-button-discount-note">
						<view class="layout">			
							<view class="shopping-button-discount-delivery">配送费：￥{{orderForm.deliveryAmount}}</view>
							<view class="shopping-button-discount-common">共优惠￥{{orderForm.discountAmount}}</view>
						</view>
					</view>
				</view>
				<view v-if="allowedManage == 1" class="shopping-button-settlement">
					<view @click="handleShoppngSubmit()">
						去结算
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allowedManage:1,
				allowedManageTooltip:"管理",
				selectedShoppingIDs:[],
				productTotal:0,
				productList:[
				],
				orderForm:{
					orderAmount:0,
					discountAmount:0,
					deliveryAmount:0
				}
			}
		},
		onLoad() {
		},
		onShow() {
			this.refreshShoppingList();
		},
		methods: {
			handleShoppingChecked:function(item,$event){
				console.log(item,$event)
			},
			handleShoppngSubmit:function(){
				let _this = this
				if(_this.selectedShoppingIDs.length < 1){
					uni.showModal({
						title:"商品结算提醒",
						content:"请选择要结算的商品"
					})
				}else{
					let orderID = 0;
					try{
						let orderForm = {
							"orderID":0
						}
						_this.selectedShoppingIDs.forEach((productID)=>{
							console.log(productID)
							orderForm['shoppingID'] = productID
							_this.$transaction.submitOrder(orderForm).then(res=>{
								if(res.code == 200){
									orderID = res.data.orderID;
									orderForm['orderID'] = orderID;
								}else{
									console.log(res.message);
									throw "创建失败，请重试";
								}
							})
						});
						
					}catch(e){
						//TODO handle the exception
						uni.showModal({
							title:"商品结算提醒",
							content:"结算失败"
						})		
					}
					if(orderID < 1){
						uni.showModal({
							title:"商品结算提醒",
							content:"结算失败"
						})		
						return false;
					}else{
						uni.navigateTo({
							url:"/pages/transaction/confirm/confirm?orderID="+orderID
						})
					}
						
				}
			},
			refreshShoppingList:function(){
				let _this = this
				this.$transaction.getShoppingList().then(res=>{
					console.log(res)
					if(res.code == 200){
						_this.productTotal = res.data.total;
						_this.productList = res.data.list;
					}else{
						
					}
				});
			},
			handleManageToggled:function(){
				if(this.allowedManage == 1){
					this.allowedManage = 2;
					this.allowedManageTooltip = "完成"
				}else{
					this.allowedManage = 1;
					this.allowedManageTooltip = "管理"
				}
			},
			handleAddressSelected:function(){
				uni.redirectTo({
					url:"/pages/transaction/address/address?fromHome=shopping"
				})
			},
			handleShoppingRemoved:function(){
				let _this = this
				if(_this.selectedShoppingIDs.length < 1){
					uni.showModal({
						title:"商品删除提醒",
						content:"请选择要删除的商品"
					})
				}else{
					this.$transaction.adjustShoppingQuantity({
						"productID":product.ID,
						"quantity":product['quantity']
					}).then(res=>{
						console.log(res)
						if(res.code == 200){
							_this.productList.splice(index,1,product)
						}else{
							
						}
					});
				}
			},
			handleQuantityAdded:function(product,index){
				let _this = this
				product['quantity'] = product['quantity']+1
				this.$transaction.adjustShoppingQuantity({
					"productID":product.ID,
					"quantity":product['quantity']
				}).then(res=>{
					console.log(res)
					if(res.code == 200){
						_this.productList.splice(index,1,product)
					}else{
						
					}
				});
			},
			handleQuantityDecred:function(product,index){
				let _this = this
				let originaQuantity = product['quantity']
				originaQuantity = parseInt(originaQuantity)
				if(originaQuantity > 1){
					product['quantity'] = product['quantity']-1
					this.$transaction.adjustShoppingQuantity({
						"productID":product.ID,
						"quantity":product['quantity']
					}).then(res=>{
						console.log(res)
						if(res.code == 200){
							_this.productList.splice(index,1,product)
						}else{
							
						}
					});
				}				
			}
		}
	}
</script>

<style>
page { background:#ededed; padding-top: 120rpx; padding-bottom: 100rpx; }

.shopping-header { padding: 15rpx 25rpx; position: fixed; top:var(--status-bar-height); left:0; right: 0; }
.shopping-header { background: #ededed; z-index: 100; }
.shopping-header-tooltip { width:80px; font-size: 18px; font-weight: 900; }
.shopping-header-tooltip text { font-size: 16px; font-weight: 800; color: #999;}
.shopping-header-address { width:400rpx; height: 30rpx; background: #fff; padding: 10rpx 15rpx; border-radius: 50rpx; }
.shopping-header-address { font-size: 14px; color: #666; overflow: hidden; line-height: 50rpx; }
.shopping-header-address-icon { width: 30rpx; height: 30rpx; }
.shopping-header-address-text { width: 340rpx; height: 30rpx; line-height: 30rpx; text-align: center;}
.shopping-header-address-button { width: 30rpx; height: 30rpx;}
.shopping-header-button { padding-left: 50rpx; font-size: 16px; height: 30rpx; overflow: hidden; }

.shopping-box { padding:15rpx; z-index: 99; }
.shopping-box-item { background:#fff; padding:15rpx; border-radius:15rpx; margin-bottom: 30rpx; }
.shopping-box-item-checked { padding:80rpx 0; padding-right: 10rpx; width: 50rpx; }
.shopping-box-item-icon { width: 200rpx; height: 200rpx;}
.shopping-box-item-icon image { width: 100%; height: 100%; border-radius: 10rpx;}

.shopping-box-item-text { padding:10rpx; width: 410rpx; }
.shopping-box-item-text-top {  width: 400rpx; height: 50rpx; line-height: 50rpx; font-weight: 800; overflow: hidden; }
.shopping-box-item-text-info { font-size: 14px; color: #666; background: #ededed; border-radius: 5rpx; padding: 10rpx;}
.shopping-box-item-text-price { width: 230rpx;}
.shopping-box-item-text-price-newest { color: red; font-size: 14px; padding-top: 20rpx;}
.shopping-box-item-text-price-newest text { font-weight: bold; font-size: 18px;}
.shopping-box-item-text-price-original { color: gray;}
.shopping-box-item-text-volume { width: 180rpx; padding-top: 30rpx; }
.shopping-box-item-text-volume-note { width: 80rpx; text-align: center; background: #ededed; border-radius: 5rpx;}

.shopping-box-item-text-volume-note { padding: 10rpx; }
.shopping-box-item-text-volume-added { width: 40rpx; text-align: center; padding-top: 10rpx; }
.shopping-box-item-text-volume-derice { width: 40rpx; text-align: center; padding-top: 10rpx; }

.shopping-button { position:fixed; bottom:0; left:0; right:0; }
.shopping-button { background:#fff; padding:15rpx 25rpx; }

.shopping-button-checkall { width:70px; padding: 30rpx 0; }

.shopping-button-action { width: 580rpx; padding-top: 15rpx;}
.shopping-button-action-clean { padding-left: 60rpx; padding-top: 18rpx; height: 30rpx; line-height: 30rpx;}
.shopping-button-action-clean { font-size: 14px; color: red;}
.shopping-button-action-clean-icon { width: 30rpx; height: 30rpx; padding-right: 10rpx;}
.shopping-button-action-collection,
.shopping-button-action-delete { border: #999 1px solid; border-radius: 50rpx; padding: 15rpx 40rpx; font-size: 14px;}
.shopping-button-action-collection { margin:0 40rpx;}

.shopping-button-discount { width:360rpx; padding-right: 10rpx; font-size: 14px; text-align:right; }
.shopping-button-discount-text text { color:red; font-size:22px; font-weight:bold; }
.shopping-button-discount-delivery { width:205rpx; }
.shopping-button-discount-common { width:150rpx;color:red; text-align:right; }


.shopping-button-settlement { width: 180rpx;}
.shopping-button-settlement { background:red; color:#fff; border-radius:40rpx; padding:15rpx; }
.shopping-button-settlement { text-align:center; width: 180rpx; height:60rpx; line-height:60rpx; }
</style>
